<template>
  <div class="decoration__page">
    <div class="usercenter">
      <!-- 左侧展示 -->
      <div class="user">
        <div class="user__radius">
          <div class="topBar">
            <div class="topBar__one">
              <span>{{ now }}</span>
              <span>底部导航</span>
              <span>
                <i class="el-icon-share" />
              </span>
            </div>
          </div>
          <div class="info">
            <img
              src="https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIj8fkACXBjG5oxepn1slUQm5ibBia0PvZPdo7Gib583vmDKuYxQOkuWsAd1eotA6fbLXMYiaXAdgRu5A/132"
              class="info__image"
            />
          </div>
        </div>
        <div style="marginTop: 530px;" class="user__cover">
          <div class="bottom_bar">
            <div v-for="(item, index) in menuList" :key="item.id">
              <div class="bottom_bar_item">
                <img
                  :class="
                    formData.codeStyle == 2 &&
                    (menuList.length == 1 ||
                      (menuList.length == 2 && index == 1) ||
                      (menuList.length == 3 && index == 1) ||
                      (menuList.length > 3 && index == 2))
                      ? 'bottom_bar_item_icon_big'
                      : 'bottom_bar_item_icon'
                  "
                  src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/1.png"
                />
                <span class="bottom_bar_item_text">{{ item.menuName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧设置 -->
      <el-card class="setting">
        <div slot="header" class="setting__header">
          <span>导航设置</span>
        </div>
        <el-form ref="formData" :model="formData" label-width="80px">
          <div class="setmenu__form--item" style="padding-top: 10px;">
            <label class="el-form-item__label">选择样式:</label>
            <el-radio-group v-model="formData.codeStyle">
              <el-radio :label="1">普通样式</el-radio>
              <el-radio :label="2">中间大图样式</el-radio>
            </el-radio-group>
          </div>
          <div class="setmenu__form--item" style="padding-top: 0px;">
            <label class="el-form-item__label">添加导航:</label>
            <span style="color: #9797A1;fontSize:12px"
              >最多添加5个导航，鼠标拖拽调整导航顺序</span
            >
          </div>

          <!-- 导航item -->
          <div
            v-for="(item, index) in menuList"
            :key="item.id"
            @drop="drop($event)"
            @dragover="dragover($event)"
          >
            <div class="bar_item">
              <el-form-item label="名称" prop="name">
                <el-input v-model="item.menuName"></el-input>
              </el-form-item>
              <el-form-item label="链接" prop="link">
                <link-select
                  :inner="true"
                  @change="selectLinkHandle"
                ></link-select>
                <div>
                  <span style="color: #9797A1">默认页面-首页</span>
                </div>
              </el-form-item>
              <el-form-item label="图标" prop="icon">
                <el-radio-group v-model="item.iconType">
                  <el-radio :label="1">系统图标</el-radio>
                  <el-radio :label="2">自定义图标</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="图片" prop="pic">
                <div style="display:flex">
                  <div>
                    <upload-file></upload-file>
                    <span style="color: #9797A1;marginLeft: 12px;">未选中</span>
                  </div>
                  <div>
                    <upload-file></upload-file>
                    <span style="color: #9797A1;marginLeft: 17px;">选中</span>
                  </div>
                </div>
                <div>
                  <span style="color: #9797A1"
                    >建议尺寸为50*50，支持png格式</span
                  >
                </div>
              </el-form-item>
              <div class="bar_item_del" @click="delect(item, index)">
                <img
                  class="bar_item_del_icon"
                  src="../../assets/images/del.png"
                />
              </div>
            </div>
          </div>

          <!-- 添加导航按钮 -->
          <el-form-item>
            <el-button type="primary" @click="addNav()">添加导航</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div class="submit">
      <el-button
        class="submit__save"
        type="primary"
        size="medium"
        @click="submit"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import UserCenter, {
  MenuList,
} from "@/views/decoration/components/NavBar/formModel/NavBar";
import { getUserCenterConfig } from "@/api/decoration/decoration";
import UploadFile from "@/views/decoration/components/NavBar/UploadFile.vue";
import LinkSelect from "@/components/LinkSelect";
import LinkSelectItem from "@/components/LinkSelect/src/components/LinkSelectItem";

@Component({
  components: {
    LinkSelect,
    UploadFile,
  },
})
export default class Page extends Vue {
  /** 配置数据 */
  formData: UserCenter = new UserCenter();

  /** 底部tab数据源 */
  menuList: MenuList[] = [];

  mounted() {
    this.getAllSetting();
  }

  /** 新增导航 */
  addNav() {
    if (this.menuList.length > 4) {
      return false;
    }
    const defaultTab = {
      menuName: "1",
      id: null,
      iconType: 2,
      noSelectIcon: "",
      selectIcon: "",
      linkSelectItem: "",
      sortIndex: 3,
    };
    this.menuList.push(defaultTab);
  }

  /** 点击链接选择 */
  selectLinkHandle(linkDataItem: LinkSelectItem) {
    this.menuItem.linkSelectItem = linkDataItem;
  }

  /** 删除底部导航tab */
  delect(item, index) {
    this.menuList.splice(index, 1);
  }

  /** 获取设置 */
  async getAllSetting() {
    const result = await getUserCenterConfig();
    const { code, data } = result;
    if (code === 200) {
      this.formData = data;
    }
  }

  get now() {
    const date = new Date();
    const hour = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
    const minutes =
      date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
    const now = `${hour}:${minutes}`;
    return now;
  }

  // 当前表的拖动
  dragStart(e, type) {
    e.stopPropagation();
    e.dataTransfer.setData("Txt", type);
  }

  dragEnd(e) {
    const index = this.expandMenu.findIndex(item => item.id === e.target.id);
    this.expandMenu[index].splitFlag = false;
  }

  dragover(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
  }

  drop(e) {
    e.preventDefault();
    const data = e.dataTransfer.getData("Txt");
    if (data === "splitFlag") {
      const index = this.expandMenu.findIndex(item => item.id === e.target.id);
      this.expandMenu[index].splitFlag = true;
    }
  }

  async submit() {
    console.log(this.menuList);
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/decoration/navBar";
</style>
